<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Test</title>
    <script>
        var ws;

        function openWebSocket() {
            if (!window.WebSocket) {
                alert("Your browser does not support WebSocket.");
                return;
            }
            ws = new WebSocket("ws://localhost:8080/echo");
            ws.onopen = function() {
                console.log("WebSocket is open now.");
            };
            ws.onmessage = function(evt) {
                console.log("Received message: " + evt.data);
            };
            ws.onclose = function() {
                console.log("WebSocket is closed now.");
            };
        }

        function sendMessage() {
            var message = document.getElementById("message").value;
            ws.send(message);
        }

        function closeWebSocket() {
            ws.close();
        }

        window.onload = function() {
            openWebSocket();
        };
    </script>
</head>
<body>
    <h1>WebSocket Test</h1>
    <input type="text" id="message">
    <button onclick="sendMessage()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
</body>
</html>